
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<title>View Teachers</title>
</h:head>

<f:view>
	<body>
		<ui:composition template="../includes/template.xhtml">
			<ui:define name="mainbody">
				<p:panel id="panel" header="View Teachers" style="min-height: 550px"
					styleClass="prime_panel">
					<h:form id="form">

						<p:growl id="growl" showDetail="true" sticky="false"
							autoUpdate="true" showSummary="false" />

						<p:dataTable var="teacher" value="#{viewTeachersBean.teachers}"
							rowKey="#{teacher.teacherId}" rows="10"
							paginator="true" paginatorPosition="bottom"
							selection="#{viewTeachersBean.selectedTeacher}"
							selectionMode="single"	id="teachersTable">

							<p:ajax event="rowSelect" update=":form:display"
								oncomplete="teacherDialog.show()" />

							<f:facet name="header">  
					            List of Teachers
					        </f:facet>
					        
					        <p:column headerText="Staff Number" sortBy="#{teacher.staffNumber}"
								filterBy="#{teacher.staffNumber}" id="staffNumber">  
					            #{teacher.staffNumber}  
					        </p:column>

							<p:column headerText="Teacher Name" sortBy="#{teacher.name}"
								filterBy="#{teacher.name}" id="name">  
					            #{teacher.name}  
					        </p:column>
					        
					        <p:column headerText="Designation" sortBy="#{teacher.position}"
								filterBy="#{teacher.position}" id="parent">  
					            #{teacher.position}  
					        </p:column>
							
						</p:dataTable>

						<p:dialog header="Teacher Detail" widgetVar="teacherDialog"
							resizable="false" width="350" height="200"
							showEffect="fade" hideEffect="explode">

							<h:panelGrid id="display" columns="2" cellpadding="4">

								<h:outputText value="Name:" />
								<h:outputText value="#{viewTeachersBean.selectedTeacher.name}" id="name" />
								
								<h:outputText value="Designation:" />
								<h:outputText value="#{viewTeachersBean.selectedTeacher.position}" id="designation" />
								
								<h:outputText value="Gender:" />
								<h:outputText rendered="#{viewTeachersBean.selectedTeacher.gender eq true}" value="Male" id="male" />
								<h:outputText rendered="#{viewTeachersBean.selectedTeacher.gender eq false}" value="Female" id="female" />
								
								<h:outputText value="Mobile #:" />
								<h:outputText value="#{viewTeachersBean.selectedTeacher.mobileNumber} " id="mobile" />
								
								<h:outputText value="Phone #:" />
								<h:outputText value="#{viewTeachersBean.selectedTeacher.phoneNumber}" id="phone" />																								
								
								<h:outputText value="Date of Birth:" />
								<h:outputText value="#{viewTeachersBean.selectedTeacher.dob} " id="dob" />
							
							</h:panelGrid>
						</p:dialog>
					</h:form>
				</p:panel>
			</ui:define>
		</ui:composition>
	</body>
</f:view>
</html>